import React, { Component } from 'react';

import { Flex } from 'antd-mobile';
import { NavBar, Icon, Tabs, List, Button, ActivityIndicator} from 'antd-mobile';
import { Link } from 'react-router-dom';
import { get } from '../api/getData';
import moment from "moment";
import TaokeOrder from "../components/taokeorder";
import 'antd-mobile/lib/flex/style/index';
import 'antd-mobile/lib/nav-bar/style/css';
import 'antd-mobile/lib/icon/style/css';
import 'antd-mobile/lib/tabs/style/css';
import 'antd-mobile/lib/list/style/css';
import 'antd-mobile/lib/button/style/css';
import 'antd-mobile/lib/picker/style/css';
import 'antd-mobile/lib/activity-indicator/style/css';

import '../allStyle.css';

class Order extends Component{
    state = {
        count : 0,
        list : [],
        animating: false
    }
    componentDidMount(){
        this.getData('all');
        document.title = '订单列表';
    }
    getData (type = 'all'){
        this.setState({
            animating: true
        });
        let reqParams = {
            type : type
        };

        let _this = this;
        get('/api/user/order', reqParams, function (error, data) {
            _this.setState({
                animating: false
            });
            if(null === error){
                _this.setState({
                    ...data
                });
            }
        });
    }
    tabChange(activeKey){
        this.getData(activeKey.type);
    }
    render(){
        const tabs = [
            { title: '全部订单', type:'all'},
            { title: '我的订单', type:'my'},
            { title: '代理订单', type:'agent'},
          ];

        return(
            <div>
                <ActivityIndicator
                                toast
                                text="正在获取数据..."
                                animating={this.state.animating}
                              />
                <NavBar
                    mode='light'
                    icon={<Link to='/User'><Icon type="left" /></Link>}
                    style={{backgroundColor:'white'}}
                ></NavBar>
                <div style={{paddingTop:'10px',fontSize:'15px',marginLeft:'5%',height:'50px',color:'gray',marginTop:'1.2rem'}}>
                    <p >订单列表</p>
                    <p style={{fontSize:'14px'}}>订单系统数据延迟10分钟，下单后并不会立即统计到！</p>
                </div>
                <div>
                    <Tabs tabs={tabs} initialPage={0} animated={false} useOnPan={false} onChange={this.tabChange.bind(this)}>
                    <div style={{ display: 'flex', backgroundColor: '#fff',width:'100%' }}>
                        <TaokeOrder list={this.state.list}/>
                    </div>
                    <div style={{ display: 'flex',  backgroundColor: '#fff' }}>
                        <TaokeOrder list={this.state.list}/>
                    </div>
                    <div style={{ display: 'flex',  backgroundColor: '#fff' }}>
                        <TaokeOrder list={this.state.list}/>
                    </div>
                    </Tabs>
                </div>
            </div>
        )
    }
}
export default Order;
